React experimental_useFormStatus: Panduan Komprehensif untuk Manajemen Formulir yang Disempurnakan

            // app/contact-form.jsx (Komponen Server)
'use server';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Mensimulasikan pengiriman formulir asinkron
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // Dalam aplikasi nyata, Anda akan mengirim data ke server
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Terima kasih atas kiriman Anda!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      

        Nama:
        
      
      

        Email:
        
      
      

        Pesan:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Mengirim...' : 'Kirim'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL2NvbnRhY3QtZm9ybS5qc3ggKEtvbXBvbmVuIFNlcnZlcikKJ3VzZSBzZXJ2ZXInOwoKaW1wb3J0IHsgZXhwZXJpbWVudGFsX3VzZUZvcm1TdGF0dXMgYXMgdXNlRm9ybVN0YXR1cyB9IGZyb20gJ3JlYWN0LWRvbSc7Cgphc3luYyBmdW5jdGlvbiBoYW5kbGVTdWJtaXQoZm9ybURhdGEpIHsKICAndXNlIHNlcnZlcic7CiAgLy8gTWVuc2ltdWxhc2lrYW4gcGVuZ2lyaW1hbiBmb3JtdWxpciBhc2lua3JvbgogIGF3YWl0IG5ldyBQcm9taXNlKChyZXNvbHZlKSA9PiBzZXRUaW1lb3V0KHJlc29sdmUsIDIwMDApKTsKCiAgY29uc3QgbmFtZSA9IGZvcm1EYXRhLmdldCgnbmFtZScpOwogIGNvbnN0IGVtYWlsID0gZm9ybURhdGEuZ2V0KCdlbWFpbCcpOwogIGNvbnN0IG1lc3NhZ2UgPSBmb3JtRGF0YS5nZXQoJ21lc3NhZ2UnKTsKCiAgaWYgKCFuYW1lIHx8ICFlbWFpbCB8fCAhbWVzc2FnZSkgewogICAgdGhyb3cgbmV3IEVycm9yKCdBbGwgZmllbGRzIGFyZSByZXF1aXJlZC4nKTsKICB9CgogIC8vIERhbGFtIGFwbGlrYXNpIG55YXRhLCBBbmRhIGFrYW4gbWVuZ2lyaW0gZGF0YSBrZSBzZXJ2ZXIKICBjb25zb2xlLmxvZygnRm9ybSBkYXRhOicsIHsgbmFtZSwgZW1haWwsIG1lc3NhZ2UgfSk7CgogIHJldHVybiB7IHN1Y2Nlc3M6IHRydWUsIG1lc3NhZ2U6ICdUZXJpbWEga2FzaWggYXRhcyBraXJpbWFuIEFuZGEhJyB9Owp9CgpmdW5jdGlvbiBDb250YWN0Rm9ybSgpIHsKICBjb25zdCB7IHBlbmRpbmcsIGRhdGEsIGVycm9yIH0gPSB1c2VGb3JtU3RhdHVzKCk7CgogIHJldHVybiAoCiAgICA8Zm9ybSBhY3Rpb249e2hhbmRsZVN1Ym1pdH0+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im5hbWUiPk5hbWE6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im5hbWUiIG5hbWU9Im5hbWUiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0iZW1haWwiPkVtYWlsOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9ImVtYWlsIiBpZD0iZW1haWwiIG5hbWU9ImVtYWlsIiBkaXNhYmxlZD17cGVuZGluZ30gLz4KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im1lc3NhZ2UiPlBlc2FuOjwvbGFiZWw+CiAgICAgICAgPHRleHRhcmVhIGlkPSJtZXNzYWdlIiBuYW1lPSJtZXNzYWdlIiBkaXNhYmxlZD17cGVuZGluZ30gLz4KICAgICAgPC9kaXY+CiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0IiBkaXNhYmxlZD17cGVuZGluZ30+CiAgICAgICAge3BlbmRpbmcgPyAnTWVuZ2lyaW0uLi4nIDogJ0tpcmltJ30KICAgICAgPC9idXR0b24+CgogICAgICB7ZXJyb3IgJiYgPHAgc3R5bGU9e3sgY29sb3I6ICdyZWQnIH19PkVycm9yOiB7ZXJyb3IubWVzc2FnZX08L3A+fQogICAgICB7ZGF0YT8uc3VjY2VzcyAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ2dyZWVuJyB9fT57ZGF0YS5tZXNzYWdlfTwvcD59CiAgICA8L2Zvcm0+CiAgKTsKfQoKZXhwb3J0IGRlZmF1bHQgQ29udGFjdEZvcm07Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Penjelasan:</b></p>

<ol>
  <li><b>'use server':</b> Arahan ini menetapkan fungsi <code>handleSubmit</code> sebagai Aksi Server React (React Server Action). Aksi Server memungkinkan Anda untuk mengeksekusi kode sisi server langsung dari komponen React Anda.</li>
  <li><b><code>useFormStatus()</code>:</b> Kita memanggil hook <code>useFormStatus()</code> di dalam komponen <code>ContactForm</code>. Ini mengembalikan objek dengan properti berikut:</li>
    <ul>
      <li><code>pending</code>: Sebuah boolean yang menunjukkan apakah formulir sedang dalam proses pengiriman.</li>
      <li><code>data</code>: Data yang dikembalikan oleh Aksi Server setelah pengiriman berhasil.</li>
      <li><code>error</code>: Sebuah objek kesalahan jika Aksi Server melemparkan kesalahan.</li>
    </ul>
  <li><b>Elemen Formulir:</b> Formulir ini mencakup kolom input untuk nama, email, dan pesan. Atribut <code>disabled</code> diatur ke <code>pending</code>, mencegah pengguna berinteraksi dengan formulir saat sedang dikirim.</li>
  <li><b>Tombol Kirim:</b> Teks tombol kirim berubah menjadi "Mengirim..." ketika <code>pending</code> bernilai true.</li>
  <li><b>Pesan Kesalahan dan Keberhasilan:</b> Komponen menampilkan pesan kesalahan jika <code>error</code> ada, dan pesan keberhasilan jika <code>data.success</code> bernilai true.</li>
</ol>

<h3>Properti yang Dikembalikan oleh <code>useFormStatus</code></h3>

<ul>
  <li><b><code>pending</code>:</b> Sebuah nilai boolean yang menunjukkan apakah formulir sedang dikirim. Ini berguna untuk menonaktifkan tombol kirim dan menampilkan indikator pemuatan.</li>
  <li><b><code>data</code>:</b> Data yang dikembalikan oleh Aksi Server setelah pengiriman formulir yang berhasil. Ini bisa berupa nilai apa pun yang dapat diserialisasi.</li>
  <li><b><code>error</code>:</b> Sebuah objek kesalahan jika Aksi Server melemparkan pengecualian selama pengiriman. Ini memungkinkan Anda untuk menampilkan pesan kesalahan kepada pengguna.</li>
  <li><b><code>action</code>:</b> Fungsi Aksi Server yang dipanggil. Ini bisa berguna untuk mengidentifikasi aksi mana yang bertanggung jawab atas status saat ini.</li>
  <li><b><code>formState</code>:</b> (Kurang umum) State formulir yang terkait dengan formulir. Ini sangat relevan ketika Anda mengelola state formulir secara eksternal.</li>
</ul>

<h2>Kasus Penggunaan Lanjutan</h2>

<h3>1. Penanganan Kesalahan dan Validasi Dinamis</h3>

<p><code>experimental_useFormStatus</code> dapat digunakan untuk mengimplementasikan penanganan kesalahan dan validasi dinamis. Misalnya, Anda dapat memeriksa properti <code>error</code> dan menampilkan pesan kesalahan spesifik berdasarkan jenis kesalahan yang terjadi.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>function ContactForm() {
  const { pending, data, error } = useFormStatus();

  let errorMessage = null;

  if (error) {
    if (error.message === 'All fields are required.') {
      errorMessage = 'Harap isi semua kolom yang wajib diisi.';
    } else {
      errorMessage = 'Terjadi kesalahan saat mengirimkan formulir.';
    }
  }

  return (
    <form action={handleSubmit}>
      {/* ... kolom formulir ... */}

      {errorMessage && <p style={{ color: 'red' }}>Error: {errorMessage}</p>}
      {data?.success && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="ZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgeyBwZW5kaW5nLCBkYXRhLCBlcnJvciB9ID0gdXNlRm9ybVN0YXR1cygpOwoKICBsZXQgZXJyb3JNZXNzYWdlID0gbnVsbDsKCiAgaWYgKGVycm9yKSB7CiAgICBpZiAoZXJyb3IubWVzc2FnZSA9PT0gJ0FsbCBmaWVsZHMgYXJlIHJlcXVpcmVkLicpIHsKICAgICAgZXJyb3JNZXNzYWdlID0gJ0hhcmFwIGlzaSBzZW11YSBrb2xvbSB5YW5nIHdhamliIGRpaXNpLic7CiAgICB9IGVsc2UgewogICAgICBlcnJvck1lc3NhZ2UgPSAnVGVyamFkaSBrZXNhbGFoYW4gc2FhdCBtZW5naXJpbWthbiBmb3JtdWxpci4nOwogICAgfQogIH0KCiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgey8qIC4uLiBrb2xvbSBmb3JtdWxpciAuLi4gKi99CgogICAgICB7ZXJyb3JNZXNzYWdlICYmIDxwIHN0eWxlPXt7IGNvbG9yOiAncmVkJyB9fT5FcnJvcjoge2Vycm9yTWVzc2FnZX08L3A+fQogICAgICB7ZGF0YT8uc3VjY2VzcyAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ2dyZWVuJyB9fT57ZGF0YS5tZXNzYWdlfTwvcD59CiAgICA8L2Zvcm0+CiAgKTsKfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>2. Pembaruan Optimistis</h3>

<p>Pembaruan optimistis melibatkan pembaruan UI secara langsung seolah-olah pengiriman formulir akan berhasil, bahkan sebelum server mengonfirmasi pengiriman. Ini dapat meningkatkan pengalaman pengguna dengan membuat aplikasi terasa lebih responsif. <code>experimental_useFormStatus</code> dapat digunakan untuk mengelola pembaruan optimistis dengan mempertahankan variabel state terpisah untuk melacak data optimistis.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>import { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';
  // Mensimulasikan pengiriman formulir asinkron
  await new Promise((resolve) => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    throw new Error('All fields are required.');
  }

  // Dalam aplikasi nyata, Anda akan mengirim data ke server
  console.log('Form data:', { name, email, message });

  return { success: true, message: 'Terima kasih atas kiriman Anda!' };
}

function ContactForm() {
  const { pending, data, error } = useFormStatus();
  const [optimisticMessage, setOptimisticMessage] = useState('');

  const handleSubmitOptimistic = async (formData) => {
      setOptimisticMessage('Mengirim...');
      const result = await handleSubmit(formData); // Menunggu aksi server.
      if (result?.success){
        setOptimisticMessage(result.message)
      } else {
          setOptimisticMessage("");
      }

  };
  return (
    <form action={handleSubmitOptimistic}>
      <div>
        <label htmlFor="name">Nama:</label>
        <input type="text" id="name" name="name" disabled={pending} />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" disabled={pending} />
      </div>
      <div>
        <label htmlFor="message">Pesan:</label>
        <textarea id="message" name="message" disabled={pending} />
      </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Mengirim...' : 'Kirim'}
      </button>

      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {optimisticMessage && <p style={{ color: 'green' }}>{optimisticMessage}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="aW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7CmltcG9ydCB7IGV4cGVyaW1lbnRhbF91c2VGb3JtU3RhdHVzIGFzIHVzZUZvcm1TdGF0dXMgfSBmcm9tICdyZWFjdC1kb20nOwoKYXN5bmMgZnVuY3Rpb24gaGFuZGxlU3VibWl0KGZvcm1EYXRhKSB7CiAgJ3VzZSBzZXJ2ZXInOwogIC8vIE1lbnNpbXVsYXNpa2FuIHBlbmdpcmltYW4gZm9ybXVsaXIgYXNpbmtyb24KICBhd2FpdCBuZXcgUHJvbWlzZSgocmVzb2x2ZSkgPT4gc2V0VGltZW91dChyZXNvbHZlLCAyMDAwKSk7CgogIGNvbnN0IG5hbWUgPSBmb3JtRGF0YS5nZXQoJ25hbWUnKTsKICBjb25zdCBlbWFpbCA9IGZvcm1EYXRhLmdldCgnZW1haWwnKTsKICBjb25zdCBtZXNzYWdlID0gZm9ybURhdGEuZ2V0KCdtZXNzYWdlJyk7CgogIGlmICghbmFtZSB8fCAhZW1haWwgfHwgIW1lc3NhZ2UpIHsKICAgIHRocm93IG5ldyBFcnJvcignQWxsIGZpZWxkcyBhcmUgcmVxdWlyZWQuJyk7CiAgfQoKICAvLyBEYWxhbSBhcGxpa2FzaSBueWF0YSwgQW5kYSBha2FuIG1lbmdpcmltIGRhdGEga2Ugc2VydmVyCiAgY29uc29sZS5sb2coJ0Zvcm0gZGF0YTonLCB7IG5hbWUsIGVtYWlsLCBtZXNzYWdlIH0pOwoKICByZXR1cm4geyBzdWNjZXNzOiB0cnVlLCBtZXNzYWdlOiAnVGVyaW1hIGthc2loIGF0YXMga2lyaW1hbiBBbmRhIScgfTsKfQoKZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgeyBwZW5kaW5nLCBkYXRhLCBlcnJvciB9ID0gdXNlRm9ybVN0YXR1cygpOwogIGNvbnN0IFtvcHRpbWlzdGljTWVzc2FnZSwgc2V0T3B0aW1pc3RpY01lc3NhZ2VdID0gdXNlU3RhdGUoJycpOwoKICBjb25zdCBoYW5kbGVTdWJtaXRPcHRpbWlzdGljID0gYXN5bmMgKGZvcm1EYXRhKSA9PiB7CiAgICAgIHNldE9wdGltaXN0aWNNZXNzYWdlKCdNZW5naXJpbS4uLicpOwogICAgICBjb25zdCByZXN1bHQgPSBhd2FpdCBoYW5kbGVTdWJtaXQoZm9ybURhdGEpOyAvLyBNZW51bmdndSBha3NpIHNlcnZlci4KICAgICAgaWYgKHJlc3VsdD8uc3VjY2Vzcyl7CiAgICAgICAgc2V0T3B0aW1pc3RpY01lc3NhZ2UocmVzdWx0Lm1lc3NhZ2UpCiAgICAgIH0gZWxzZSB7CiAgICAgICAgICBzZXRPcHRpbWlzdGljTWVzc2FnZSgiIik7CiAgICAgIH0KCiAgfTsKICByZXR1cm4gKAogICAgPGZvcm0gYWN0aW9uPXtoYW5kbGVTdWJtaXRPcHRpbWlzdGljfT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibmFtZSI+TmFtYTo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ibmFtZSIgbmFtZT0ibmFtZSIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJlbWFpbCI+RW1haWw6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJlbWFpbCIgbmFtZT0iZW1haWwiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibWVzc2FnZSI+UGVzYW46PC9sYWJlbD4KICAgICAgICA8dGV4dGFyZWEgaWQ9Im1lc3NhZ2UiIG5hbWU9Im1lc3NhZ2UiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAgICB7cGVuZGluZyA/ICdNZW5naXJpbS4uLicgOiAnS2lyaW0nfQogICAgICA8L2J1dHRvbj4KCiAgICAgIHtlcnJvciAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ3JlZCcgfX0+RXJyb3I6IHtlcnJvci5tZXNzYWdlfTwvcD59CiAgICAgIHtvcHRpbWlzdGljTWVzc2FnZSAmJiA8cCBzdHlsZT17eyBjb2xvcjogJ2dyZWVuJyB9fT57b3B0aW1pc3RpY01lc3NhZ2V9PC9wPn0KICAgIDwvZm9ybT4KICApOwp9CgpleHBvcnQgZGVmYXVsdCBDb250YWN0Rm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>3. Indikator Kemajuan untuk Unggahan File</h3>

<p>Meskipun <code>experimental_useFormStatus</code> tidak secara langsung menyediakan pembaruan kemajuan untuk unggahan file, Anda dapat menggabungkannya dengan teknik lain untuk mengimplementasikan indikator kemajuan. Misalnya, Anda dapat menggunakan API <code>FormData</code> untuk melacak kemajuan unggahan file dan memperbarui UI sesuai dengan itu.</p>

<p><b>Catatan:</b> Karena hook ini bekerja terutama bersamaan dengan Aksi Server, akses langsung ke kemajuan unggahan di dalam <code>experimental_useFormStatus</code> itu sendiri terbatas. Anda biasanya akan menangani kemajuan unggahan di dalam kode Aksi Server Anda (jika memungkinkan, tergantung pada lingkungan) dan kemudian mencerminkan status pengiriman formulir secara keseluruhan menggunakan <code>experimental_useFormStatus</code>.</p>

<h2>Pertimbangan Global</h2>

<p>Saat mengembangkan formulir untuk audiens global, penting untuk mempertimbangkan hal-hal berikut:</p>

<ul>
  <li><b>Lokalisasi:</b> Pastikan semua label formulir, pesan kesalahan, dan notifikasi keberhasilan dilokalkan ke bahasa pilihan pengguna. Manfaatkan pustaka dan kerangka kerja internasionalisasi (i18n) untuk mengelola terjemahan secara efektif.</li>
  <li><b>Format Tanggal dan Angka:</b> Gunakan format tanggal dan angka yang sesuai berdasarkan lokal pengguna. Misalnya, tanggal dapat diformat sebagai BB/HH/TTTT di Amerika Serikat tetapi sebagai HH/BB/TTTT di banyak negara lain. Demikian pula, format angka mungkin menggunakan pemisah desimal dan pemisah ribuan yang berbeda.</li>
  <li><b>Zona Waktu:</b> Jika formulir Anda melibatkan penjadwalan atau informasi yang sensitif terhadap waktu, perhatikan zona waktu. Izinkan pengguna untuk memilih zona waktu mereka dan konversikan waktu sesuai dengan itu.</li>
  <li><b>Format Alamat:</b> Format alamat sangat bervariasi di berbagai negara. Sediakan kolom alamat yang fleksibel yang mengakomodasi struktur alamat yang berbeda.</li>
  <li><b>Aksesibilitas:</b> Pastikan formulir Anda dapat diakses oleh pengguna dengan disabilitas. Gunakan elemen HTML semantik, sediakan teks alternatif untuk gambar, dan pastikan formulir Anda dapat dinavigasi dengan keyboard.</li>
  <li><b>Format Mata Uang:</b> Jika Anda berurusan dengan nilai moneter, format mata uang dengan tepat berdasarkan lokasi pengguna. Gunakan simbol mata uang dan konvensi pemformatan yang akrab bagi pengguna. Misalnya, di AS, Anda akan menggunakan "$1.234,56," sementara di Jerman, Anda mungkin menggunakan "1.234,56 €."</li>
  <li><b>Sensitivitas Budaya:</b> Waspadai perbedaan budaya yang dapat memengaruhi desain formulir. Misalnya, warna atau simbol tertentu mungkin memiliki arti yang berbeda di berbagai budaya.</li>
</ul>

<p><b>Contoh: Formulir Alamat Internasional</b></p>

<p>Formulir alamat sederhana mungkin mengasumsikan alamat gaya AS. Formulir yang sadar global perlu mengakomodasi lebih banyak fleksibilitas.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>
 <form>
  <label for="address1">Baris Alamat 1:</label>
  <input type="text" id="address1" name="address1"><br><br>

  <label for="address2">Baris Alamat 2 (Opsional):</label>
  <input type="text" id="address2" name="address2"><br><br>

  <label for="city">Kota:</label>
  <input type="text" id="city" name="city"><br><br>

  <label for="state">Negara Bagian/Provinsi:</label>
  <input type="text" id="state" name="state"><br><br>

  <label for="postalCode">Kode Pos:</label>
  <input type="text" id="postalCode" name="postalCode"><br><br>

  <label for="country">Negara:</label>
  <select id="country" name="country">
   <option value="USA">Amerika Serikat</option>
   <option value="CAN">Kanada</option>
   {/* Opsi negara lainnya */}
  </select><br><br>

  <input type="submit" value="Kirim">
 </form>
</code>
            <div class="copy-button-container">
              <button 
                data-code="CiA8Zm9ybT4KICA8bGFiZWwgZm9yPSJhZGRyZXNzMSI+QmFyaXMgQWxhbWF0IDE6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImFkZHJlc3MxIiBuYW1lPSJhZGRyZXNzMSI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0iYWRkcmVzczIiPkJhcmlzIEFsYW1hdCAyIChPcHNpb25hbCk6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImFkZHJlc3MyIiBuYW1lPSJhZGRyZXNzMiI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0iY2l0eSI+S290YTo8L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0iY2l0eSIgbmFtZT0iY2l0eSI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0ic3RhdGUiPk5lZ2FyYSBCYWdpYW4vUHJvdmluc2k6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9InN0YXRlIiBuYW1lPSJzdGF0ZSI+PGJyPjxicj4KCiAgPGxhYmVsIGZvcj0icG9zdGFsQ29kZSI+S29kZSBQb3M6PC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9InBvc3RhbENvZGUiIG5hbWU9InBvc3RhbENvZGUiPjxicj48YnI+CgogIDxsYWJlbCBmb3I9ImNvdW50cnkiPk5lZ2FyYTo8L2xhYmVsPgogIDxzZWxlY3QgaWQ9ImNvdW50cnkiIG5hbWU9ImNvdW50cnkiPgogICA8b3B0aW9uIHZhbHVlPSJVU0EiPkFtZXJpa2EgU2VyaWthdDwvb3B0aW9uPgogICA8b3B0aW9uIHZhbHVlPSJDQU4iPkthbmFkYTwvb3B0aW9uPgogICB7LyogT3BzaSBuZWdhcmEgbGFpbm55YSAqL30KICA8L3NlbGVjdD48YnI+PGJyPgoKICA8aW5wdXQgdHlwZT0ic3VibWl0IiB2YWx1ZT0iS2lyaW0iPgogPC9mb3JtPgo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Peningkatan untuk penggunaan global:</b></p>

<ul>
 <li>Gunakan daftar negara yang komprehensif.</li>
 <li>Pertimbangkan penyiapan kolom alamat dinamis berdasarkan pilihan negara (menggunakan pustaka atau API untuk validasi format alamat).</li>
 <li>Izinkan baris alamat 3 atau lebih, karena beberapa negara memerlukan format alamat yang sangat spesifik.</li>
 <li>Pisahkan "Negara Bagian/Provinsi/Wilayah" dan "Kode Pos/Kode ZIP" menjadi kolom terpisah dengan label yang jelas yang berfungsi secara internasional.</li>
</ul>

<h2>Praktik Terbaik Menggunakan <code>experimental_useFormStatus</code></h2>

<ul>
  <li><b>Jaga Aksi Server Tetap Sederhana:</b> Usahakan agar Aksi Server Anda tetap fokus pada pemrosesan data dan hindari pembaruan UI yang rumit langsung di dalam aksi tersebut. Andalkan properti <code>data</code> yang dikembalikan oleh <code>experimental_useFormStatus</code> untuk memperbarui UI di komponen klien.</li>
  <li><b>Tangani Kesalahan dengan Baik:</b> Terapkan penanganan kesalahan yang kuat di dalam Aksi Server Anda untuk menangkap pengecualian potensial. Gunakan properti <code>error</code> untuk menampilkan pesan kesalahan yang informatif kepada pengguna.</li>
  <li><b>Berikan Umpan Balik yang Jelas:</b> Gunakan properti <code>pending</code> untuk memberikan umpan balik yang jelas kepada pengguna saat formulir sedang dikirim (misalnya, menonaktifkan tombol kirim, menampilkan indikator pemuatan).</li>
  <li><b>Optimalkan Kinerja:</b> Perhatikan kinerja, terutama saat berurusan dengan formulir besar atau Aksi Server yang kompleks. Gunakan teknik seperti memoization dan pemisahan kode untuk mengoptimalkan kinerja aplikasi Anda.</li>
  <li><b>Pertimbangkan Aksesibilitas:</b> Pastikan formulir Anda dapat diakses oleh semua pengguna, termasuk mereka yang memiliki disabilitas. Ikuti panduan aksesibilitas dan gunakan teknologi bantu untuk menguji formulir Anda.</li>
</ul>

<h2>Alternatif untuk <code>experimental_useFormStatus</code></h2>

<p>Meskipun <code>experimental_useFormStatus</code> menyediakan cara yang nyaman untuk mengelola status formulir, ada pendekatan alternatif yang dapat Anda pertimbangkan:</p>

<ul>
  <li><b>Manajemen State Kustom:</b> Anda dapat secara manual mengelola status formulir menggunakan fitur manajemen state bawaan React (misalnya, <code>useState</code>, <code>useReducer</code>). Pendekatan ini memberikan lebih banyak fleksibilitas tetapi membutuhkan lebih banyak kode boilerplate.</li>
  <li><b>Pustaka Formulir:</b> Pustaka formulir seperti Formik, React Hook Form, dan Final Form menyediakan solusi manajemen formulir yang komprehensif, termasuk validasi, penanganan pengiriman, dan manajemen state.</li>
  <li><b>Pustaka Manajemen State Pihak Ketiga:</b> Pustaka manajemen state seperti Redux, Zustand, dan Recoil dapat digunakan untuk mengelola status formulir secara terpusat. Pendekatan ini cocok untuk aplikasi yang lebih besar dengan persyaratan manajemen state yang kompleks.</li>
</ul>

<p>Pilihan pendekatan tergantung pada persyaratan spesifik aplikasi Anda. <code>experimental_useFormStatus</code> sangat cocok untuk aplikasi yang menggunakan Komponen Server React dan memerlukan cara yang sederhana dan deklaratif untuk mengelola status formulir.</p>

<h2>Kesimpulan</h2>

<p><code>experimental_useFormStatus</code> adalah tambahan berharga untuk perangkat React dalam membangun formulir yang dinamis dan responsif. Dengan menyediakan cara yang terpusat dan deklaratif untuk mengelola status formulir, hook ini menyederhanakan penanganan formulir asinkron, meningkatkan pengalaman pengguna, dan menyempurnakan penanganan kesalahan. Meskipun masih merupakan API eksperimental, <code>experimental_useFormStatus</code> mewakili arah yang menjanjikan untuk manajemen formulir di React, terutama dalam konteks Komponen Server React. Dengan memahami fitur, manfaat, dan praktik terbaiknya, pengembang dapat memanfaatkan hook ini untuk membuat formulir yang lebih kuat dan ramah pengguna untuk audiens global.</p>

<p>Seperti halnya fitur eksperimental lainnya, sangat penting untuk tetap mengikuti perkembangan terbaru dan bersiap untuk potensi perubahan API saat berkembang menuju rilis yang stabil. Namun, prinsip inti dan manfaat dari <code>experimental_useFormStatus</code> kemungkinan akan tetap relevan, menjadikannya alat yang berharga untuk dieksplorasi dan dimasukkan ke dalam alur kerja pengembangan React Anda.</p>
</div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experimental_useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">status formulir</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">manajemen formulir</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Komponen Server React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">pengalaman pengguna</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">pengiriman formulir</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">formulir asinkron</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">peningkatan progresif</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>